<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="https://cdn.staticfile.org/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.10.2/jquery.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.min.js"></script>
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default" style="display: none">开始上传</button>
    </div>
</div>
</body>
<script type="text/javascript">
    var $ = jQuery,
        $list = $('#thelist'),
        $btn = $('#ctlBtn');

    var GUID = WebUploader.Base.guid();//一个GUID
    var uploader = WebUploader.create({
        // swf文件路径
        swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: './upload2.do',
        formData: {
            guid: GUID,
            md5: ''
        },
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        chunked: true, // 分片处理
        chunkSize: 32 * 1024 * 1024, // 每片32M,
        chunkRetry: false,// 如果失败，则不重试
        threads: 3,// 上传并发数。允许同时最大上传进程数。
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

        auto: false,
        resize: false
    });
    $("#ctlBtn").click(function () {
        uploader.upload();
    });
    //当文件上传成功时触发。
    uploader.on("uploadSuccess", function (file) {
        $.post('./merge.do', {guid: GUID, md5: uploader.options.formData.md5, fileName: file.name}, function (data) {
            if (data.code == 200) {
                alert('上传成功!');
            }
        });
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        console.log("文件队列事件被触发..");
        $list.append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state"></p>' +
            '</div>');
        var _file = $("#" + file.id);
        //计算md5
        uploader.md5File(file)
        // 及时显示进度
            .progress(function (percentage) {
                //console.log('Percentage:', percentage);
                _file.find("p").html("准备中:" + percentage * 100 + "%");
            })
            // 完成
            .then(function (val) {
                uploader.options.formData.md5 = val;
                $btn.show();

                console.log("ok")
            });

    });
</script>
</html>